<template>
	<view class="container">
		
		<view class="header" @tap="gotoSearch">
			<view class="search">
		        <view class="left">
					<u-icon name="search" color="#666" size="28" class="left-icon" />
					<text>搜索联系人、聊天内容</text>
				</view>
		        <view class="right" @tap.stop="gotoList">
					<u-icon name="account" color="#666" size="28" class="right-icon" />
					<text>通讯录</text>
				</view>
		    </view>
		</view>
		
		<view class="mcontent">
			
			{{eventBusMsg}}
			
		    <view class="chat-item" v-for="(msg, index) in chatGroup" :key="index" @tap="gotoChatBox(index, msg.name)" @longpress="setBellRing(index)">
				
		        <view class="chat-pics">
		            <block v-for="(face,idx) in msg.faces" :key="idx">
		                <image class="chat-face" :class="'chat-face-'+msg.faces.length" :src="face" />
		            </block>
					<view class="chat-num" v-if="msg.msgNum > 0">{{msg.msgNum}}</view>
		        </view>
				
		        <view class="chat-info">
		            <view class="chat-title">
		                <text class="chat-name">{{msg.name}}</text>
		                <text class="chat-date">{{msg.date}}</text>
		            </view>
		            <view class="chat-last-msg">
		                <text v-if="msg.lastSender !== ''">{{msg.lastSender}}：</text>
		                <text>{{msg.lastMsg}}</text>
		                <u-icon v-if="msg.bellRing" name="mic-off" color="#aaa" size="28" class="chat-tag" />
		            </view>
		        </view>
				
		    </view>
			
		</view>
		
		<button @tap="addCart">点击我添加一条商品</button>
		
	</view>
</template>

<script>
	import {
		mapActions
	} from 'vuex'
	import chatGroup from '@/common/chatGroup.js'
	import throttle from '@/utils/throttle.js'
	export default {
		data(){
			return {
				chatGroup,
				eventBusMsg:'eventBusMsg 事件通信公共汽车'
			}
		},
		onLoad(){
			
			uni.$on('eventBusMsgChanged',msg =>{
				this.eventBusMsg = msg
			})
			
			console.log("onLoad doing")
			if(!!uni.getStorageSync("chatGroup")){
				this.chatGroup = JSON.parse(uni.getStorageSync("chatGroup"))
			}
		},
		onShow(){
			console.log("Onshow doing")
			if(!!uni.getStorageSync("chatGroup")){
				this.chatGroup = JSON.parse(uni.getStorageSync("chatGroup"))
			}
		},
		methods:{
			...mapActions(['addCartAction']),
			addCart(){
				this.addCartAction({
					name:'小米王牌手机',
					price: 2222.22,
					num: 22
				})
			},
			gotoSearch(){
				uni.navigateTo({
					url: '/chat/search'
				})
			},
			gotoList(){
				uni.switchTab({
					url:'/pages/list'
				})
			},
			gotoChatBox:throttle(function(index, name){
				console.log(index)
				this.chatGroup[index].msgNum = 0
				uni.setStorageSync('chatGroup', JSON.stringify(this.chatGroup))
				uni.navigateTo({
					url: '/chat/chat?name='+name
				})
			}),
			setBellRing:throttle(function(index){
				console.log(index)
				let itemList = ['静音']
				if(this.chatGroup[index].bellRing){
					itemList = ['取消静音']
				}
				uni.showActionSheet({
					itemList,
					success: res =>{
						this.chatGroup[index].bellRing = !this.chatGroup[index].bellRing
						uni.setStorageSync('chatGroup', JSON.stringify(this.chatGroup))
					}
				})
			}),
		}
	}
</script>

<style lang="scss" scoped>
	/* 顶部搜索和通讯录 */
	.header{
	    width: 100%;
	    height: 100upx;
	    background-color: #f6f6f6;
	    position: fixed;
	    top: 0;
	    left: 0;
	    z-index: 9999;
		.search{
		    width: 630upx;
			padding: 0 20upx;
		    height: 60upx;
		    margin: 20upx 40upx 0;
		    background-color: #FFFFFF;
		    border-radius: 40upx;
		    font-size: 24upx;
		    text-align: left;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
		}
		.left, .right{
			display: flex;
			flex-direction: row;
			align-items: center;
			.left-icon, .right-icon{
				margin-right: 10upx;
			}
		}
	}
	

	
	
	.mcontent{
	    padding-top: 120upx;
	    background-color: #FFFFFF;
		font-size: 24upx;
		.chat-item{
		    display: flex;
		    flex-direction:row;
		    flex-wrap:nowrap;
		    justify-content:flex-start;
		    align-items: center;
		    align-content:center;
			height: 150upx;
			 border-bottom: 1upx solid #f1f1f1;
			.chat-pics{
			    width: 96upx;
			    height:96upx;
			    padding:2upx;
			    margin-left: 40upx;
			    margin-right: 30upx;
			    background-color: #f1f1f1;
			    display: flex;
			    flex-direction:row;
			    flex-wrap:wrap;
			    justify-content:center;
			    align-items: center;
			    align-content:center;
			    border-radius: 6upx;
				position: relative;
				.chat-face{
				    width: 26upx;
				    height: 26upx;
				    border-radius: 4upx;
				    margin: 2upx;
				}
				.chat-face-1{
				    width: 90upx;
				    height: 90upx;
				}
				.chat-face-3,.chat-face-4{
				    width: 42upx;
				    height: 42upx;
				}
				.chat-num{
				    position: absolute;
				    width: 36upx;
				    height: 36upx;
				    background-color: red;
				    color:#fff;
				    border-radius: 50%;
				    text-align: center;
				    line-height: 36upx;
				    top: -16upx;
				    left: 78upx;
				}
			}
		}
		

		.chat-info{
		    height: 84upx;
		    width: calc(100% - 170upx);
			position: relative;
			.chat-title{
			    font-size: 32upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.chat-name{
				    padding-bottom: 4upx;
				}
				.chat-date{
				    color: #999;
				    font-size: 24upx;
				    margin-right: 40upx;
				}
			}
			.chat-last-msg{
			    color: #999;
				margin-top: 6upx;
				.chat-tag{
					position: absolute;
					top: 60upx;
					right: 40upx;
				}
			}
			
		}
		
	}
</style>
